/**
 * Created by 蓝景技术 on 2018/7/6.
 * webpack 开发模式配置
 */

const webpack = require("webpack");                             //模块-webpack核心
const path = require('path');                                   //模块-路径处理
const CopyWebpackPlugin = require("copy-webpack-plugin");       //插件-拷贝文件
const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin   //插件-vue-loader
// const merge = require('webpack-merge');                         //插件-合并配置
const customConfig = require('./customConfig');                 //用户自定义配置

//开发配置
const config = {
    mode: "development",
    devtool: "#cheap-module-eval-source-map",
    entry :  customConfig.entry,
	output:{
		filename: 'js/[name].js',
		path: path.resolve(__dirname, '../dist'),
		publicPath: customConfig.outputPublicPath 
	},
	module: {
		rules: [
			{//json文件处理
				test: /\.json$/i,
				loader: "json-loader",
				include: /src/
			},
			{//css文件处理，并打包为独立一个css文件
				test: /\.css$/i,
				use:[
					'style-loader',
					'css-loader',
					{
                        loader:'postcss-loader',
                        options:{
                            sourceMap : true,   //开启sourcemap，并沿用stylus-loader生成的sourcemap，增快编译速度
                        }
                    }
				]
			},
			{//scss文件处理
				test: /\.scss$/i,
				include: /src/,
				use:[
					'style-loader',
					'css-loader',
					{
                        loader:'postcss-loader',
                        options:{
                            sourceMap : true,   //开启sourcemap，并沿用stylus-loader生成的sourcemap，增快编译速度
                        }
                    },
					'sass-loader'
				]
			},
			{//js文件处理
				test: /\.js$/i,
				loader: "babel-loader",
				include: /src/ //接收数组参数，元素为路径字符串
			},
			{//字体类型处理
				test: /\.(woff(2)?|eot|ttf|svg)(\?.*)?$/i,
				loader: 'url-loader',
				query: {
					limit: 1,
					name: 'assets/font/[name]-[hash].[ext]'
				}
			},
			{//正则匹配后缀.png、.jpg、.gif图片文件;
				test: /\.(png|jpe?g|gif)$/i,
				include: /src/,
				use: [{
					//加载url-loader 同时安装 file-loader;
					loader: 'url-loader',
					options: {
						limit: 100,//小于10000K的图片文件转base64到css里,当然css文件体积更大;
						name: 'assets/images/[name]-[hash].[ext]'//设置最终生成路径
					}
				}]
			},
			{//vue文件处理
				test: /\.vue$/i,
				loader: "vue-loader",
				include: /src/,
				options: {
					// extractCSS: true		//单独把vue文件中的样式抽离出来
				}
			},
			{
			  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i,
			  loader: 'url-loader',
			  options: {
				limit: 10000,
				name: 'assets/media/[name].[hash:7].[ext]'
			  }
			}
			
		]
	},
	plugins: customConfig.plugins.concat([
        // vue-loader必备插件
		new VueLoaderPlugin(),
		
        //热加载 HMR
        new webpack.HotModuleReplacementPlugin()   
	]),
	devServer: {
		contentBase: path.resolve(__dirname, "../src/"),//这里是相对于publicPath的，并且“生成”文件也是受output的filename路径的影响
		overlay:{           
            errors:true,        //只有错误才会输出到浏览器
		},
		historyApiFallback: true, // 如果你希望可以使用history路由模式，把所有404页面，指向回首页
		port: customConfig.serverPort,					//开启服务的端口
        // inline:true,
        host:'0.0.0.0',             //这样就可以用localhost，127.0.0.1 或内网ip访问
		hot: true, 
		watchContentBase: !customConfig.isSPA 	//为true的话，主要用来监听所有文件更新并刷新浏览器，如果是单页模式，建议false，利用热重载功能来刷新更好
	},
	resolve:customConfig.resolve,
	externals:customConfig.externals
}

module.exports = config